<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>submit</title>
    <style>
        form { /*整体*/
            margin: 0 auto; /*居中*/
            width: 400px;

            padding: 1em; /*显示表单轮廓*/
            border: 1px solid #CCC;
            border-radius: 1em;
        }

        form div + div {
            margin-top: 1em;
        }

        label { /*确保label大小相同并正确对齐*/
            display: inline-block;
            width: 90px;
            text-align: right;
        }

        input, textarea {
            /*确保所有文本输入框字体相同*/
            font: 1em sans-serif;

            /*使文本输入框大小相同*/
            width: 300px;
            box-sizing: border-box;
            /*调整文本输入框的边框样式*/
            border: 1px solid #999;
        }

        input:focus, textarea:focus {
            /*给激活的元素高亮效果*/
            border-color: #000;
        }

        textarea {
            /*使多行文本输入框和他们的label对齐*/
            vertical-align: top;
            height: 10em;
        }

        .button {
            padding-left: 90px;
            /*调整位置*/
        }

        button {
            /*这个外边距的大小与label和文本输入框之间的间距差不多*/
            margin-left: .5em;
        }
    </style>

    <!--link href="/static/css/payment.css" rel="stylesheet"-->
</head>
<body>

<form action="/submit" method="post">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name">
    </div>
    <div>
        <label for="email">Email:</label>
        <input type="email" id="email" value="default@qq.com">
    </div>
    <div>
        <label for="comment">Comment:</label>
        <textarea id="comment"></textarea>
    </div>
    <div class="button">
        <button type="submit">submit</button>
        <button type="reset">reset</button>
    </div>

</form>
<form action="https://www.baidu.com/s" method="get">
    <div>
        <label for="bd">百度:</label>
        <input name='wd' type="search" id="bd">
    </div>
    <div class="button">
        <button type="submit">submit</button>
    </div>
    <label for="groups"></label>
    <select id="groups" name="groups">
        <optgroup label="fruits">
            <option>Banana</option>
            <option selected>Cherry</option>
            <option>Lemon</option>
        </optgroup>
        <optgroup label="vegetables">
            <option>Carrot</option>
            <option>Eggplant</option>
            <option>Potato</option>
        </optgroup>
    </select>
    <br><br>
    <label for="beans">How many beans can you eat?</label><br>
    <input type="range" name="beans" id="beans" min="0" max="500" step="10">
    <span class="beancount"></span>
    <br>
    <script>
        var beans = document.querySelector('#beans');
        var count = document.querySelector('.beancount');

        count.textContent = beans.value;

        beans.oninput = function () {
            count.textContent = beans.value;
        }
    </script>
    <input type="datetime-local" name="datetime" id="datetime">
    <input type="month" name="month" id="month">
    <input type="time" name="time" id="time">
    <input type="week" name="week" id="week">
    <br>
    <label for="myDate">When are you available this summer?</label>
    <br>
    <input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate">
    <input type="color" name="color" id="color">
</form>
<form method="post" enctype="multipart/form-data">
    <div>
        <label for="file">Choose a file</label>
        <input type="file" id="file" name="myFile">
    </div>
    <div>
        <button>Send the file</button>
    </div>
</form>
<form>
    <fieldset>
        <legend>Fruit juice size</legend>
        <p>
            <input type="radio" name="size" id="size_1" value="small">
            <label for="size_1">Small</label>
        </p>
        <p>
            <input type="radio" name="size" id="size_2" value="medium">
            <label for="size_2">Medium</label>
        </p>
        <p>
            <input type="radio" name="size" id="size_3" value="large">
            <label for="size_3">Large</label>
        </p>

    </fieldset>
</form>
<form>
    <p>
        <label for="taste_1">I like cherry</label>
        <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
    </p>
    <p>
        <label for="taste_2">I like banana</label>
        <input type="checkbox" id="taste_2" name="taste_banana" value="2">
    </p>
</form>
<!--
<form>
    <h1>Payment form</h1>
    <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
    <section>
        <h2>Contact information</h2>
        <fieldset>
            <legend>Title</legend>
            <ul>
                <li>
                    <label for="title_1">
                        <input type="radio" id="title_1" name="title" value="M.">
                        Mister
                    </label>
                </li>
                <li>
                    <label for="title_2">
                        <input type="radio" id="title_2" name="title" value="Ms.">
                        Miss
                    </label>
                </li>
            </ul>
        </fieldset>
        <p>
            <label for="name">
                <span>Name: </span>
                <strong><abbr title="required">*</abbr></strong>
            </label>
            <input type="text" id="name" name="username">
        </p>
        <p>
            <label for="mail">
                <span>E-mail: </span>
                <strong><abbr title="required">*</abbr></strong>
            </label>
            <input type="email" id="mail" name="usermail">
        </p>
        <p>
            <label for="pwd">
                <span>Password: </span>
                <strong><abbr title="required">*</abbr></strong>
            </label>
            <input type="password" id="pwd" name="password">
        </p>
    </section>
    <section>
        <h2>Payment information</h2>
        <p>
            <label for="card">
                <span>Card type:</span>
            </label>
            <select id="card" name="usercard">
                <option value="visa">Visa</option>
                <option value="mc">Mastercard</option>
                <option value="amex">American Express</option>
            </select>
        </p>
        <p>
            <label for="number">
                <span>Card number:</span>
                <strong><abbr title="required">*</abbr></strong>
            </label>
            <input type="number" id="number" name="cardnumber">
        </p>
        <p>
            <label for="date">
                <span>Expiration date:</span>
                <strong><abbr title="required">*</abbr></strong>
                <em>formatted as mm/yy</em>
            </label>
            <input type="date" id="date" name="expiration">
        </p>
    </section>
    <p>
        <button type="submit">Validate the payment</button>
    </p>
</form>
-->
</body>
</html>